<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>我的证件和银行卡上传</title>
		<link rel="stylesheet" href="statics/css/bootstrap.min.css" />

		<style type="text/css">
			body {
				background: #E7F4FF;
				margin-right: 0rem;
			}
			
			.jd {
				margin: 1rem 0rem;
				padding: 0rem 3rem;
			}
			
			.container {
				background: ghostwhite;
				border-radius: 1rem;
				margin: 1rem 2rem;
				box-shadow: 0rem 0rem 1rem lightblue;
			}
			
			.baoan {
				border-radius: 3rem;
				border: 0.05rem solid #00CED1;
				margin: 1rem 0rem;
				padding-right: 7rem;
			}
			
			.top {
				background: linear-gradient(to right, #5fd6fc, #5ef0c0);
				padding: 1rem 0rem 2rem 0rem;
				margin-right: 0rem;
			}
			
			.main {
				position: absolute;
				top: 10rem;
				margin: 0rem;
				padding: 0rem;
				width: 100%;
			}
			
			.pic {
				display: inline;
				padding: 1rem 0rem;
				margin: 0rem;
				height: 10rem;
			}
			
			.ii {
				display: block;
				padding: 0.8rem;
				margin: 0rem;
				width: 100%;
				height: 10rem;
				border-radius: 2rem;
			}
			
			.in {
				display: block;
				position: absolute;
				top: 2rem;
			}
			
			.div1 {
				padding-left: 1rem;
				padding-bottom: 2rem;
				margin-bottom: 3rem;
				height: 100%;
			}
			
			.aad {
				position: absolute;
				padding: 0px;
				bottom: 0em;
				width: 100%;
				background: #87CEFA;
			}
			
			.afhsy {
				color: white;
				display: block;
				width: 100%;
				height: 3em;
				line-height: 3em;
				text-decoration: none;
				border: 0rem;	
				margin: 0rem;
				background: #87CEFA;
			}
			
			.delete {
				position: absolute;
				display: none;
				top: 0.6rem;
				right: 0rem;
				width: 2.5rem;
				z-index: 10;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<img src="statics/img/ccx_img/23233213.png" class="jd img-responsive" />
		</div>
		<div class="main">

			<!--车辆信息-->
			<div class="container">
				<div class="baoan">
					<p class="h6" style="color: #00CED1;">&nbsp&nbsp&nbsp&nbsp&nbsp报案号:${caseDiscribe.caseno}</p>
				</div>

				<p class="h3">&nbsp&nbsp${caseDiscribe.carnumber}</p>
				<p class="h6" style="float: right;color: dimgrey;">-----------出险时间：${caseDiscribe.insurancetime}</p>
			</div>

			<form action="addPhoto2" method="post" enctype="multipart/form-data" id="form2">
				<input type="hidden" name="caseno" value="${caseDiscribe.caseno}"/>
				<input type="hidden" name="carnumber" value="${caseDiscribe.carnumber}"/>
				<input type="hidden" name="insurancetime" value="${caseDiscribe.insurancetime}"/>
				<!--上传图片-->
				<div class="container div1">

					<p class="h6" style="color: dimgrey;"><img src="statics/img/ccx_img/4335353.png" width="16rem" class="img-responsive" style="display: inline;padding-bottom: 0.3rem;" /> 请根据理赔员或页面指引拍摄<span style="color: red;">您的</span>对应证件照片， 保证文字清晰，暂无法提供的，可事后在
						<span style="color: deepskyblue;">我的案件</span>中补传，以尽快支付赔款给您
					</p>

					<div style="height: 100%; width: 100%;">
						<!--驾驶证-->
						<div class="pic col-xs-6">
							<input type="file" accept="image/*" capture="camera" name="jiashizheng" class="form-control pic col-xs-12 in" id="pz_img1" style="padding: 0px;position:absolute;opacity:0;" multiple/>
							<img id="preview1" data-src="" src="statics/img/ccx_img/jsz_03.png" data-holder-rendered="true" class="ii img-responsive p1">
							<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="del01" onclick="del1()" />
						</div>
						<!--行驶证-->
						<div class="pic col-xs-6">
							<input type="file" accept="image/*" capture="camera" name="xingshizheng" class="form-control pic col-xs-12 in" id="pz_img2" style="padding: 0px;position:absolute;opacity:0;" multiple/>
							<img id="preview2" data-src="" src="statics/img/ccx_img/xsz_03.png" data-holder-rendered="true" class="ii img-responsive p2">
							<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="del02" onclick="del2()" />
						</div>
						<!--身份证正面-->

						<div class="pic col-xs-6">
							<input type="file" accept="image/*" capture="camera" name="shenfenzheng1" class="form-control pic col-xs-12 in" id="pz_img3" style="padding: 0px;position:absolute;opacity:0;" multiple/>
							<img id="preview3" data-src="" src="statics/img/ccx_img/sfz01_03.png" data-holder-rendered="true" class="ii img-responsive p3">
							<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="del03" onclick="del3()" />
						</div>

						<!--身份证反面-->
						<div class="pic col-xs-6">
							<input type="file" accept="image/*" capture="camera" name="shenfenzheng2" class="form-control pic col-xs-12 in" id="pz_img4" style="padding: 0px;position:absolute;opacity:0;" multiple/>
							<img id="preview4" data-src="" src="statics/img/ccx_img/sfz02_03.png" data-holder-rendered="true" class="ii img-responsive p4">
							<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="del04" onclick="del4()" />
						</div>
						<!--银行卡-->
						<div class="pic col-xs-6">
							<input type="file" accept="image/*" capture="camera" name="yinhangka" class="form-control pic col-xs-12 in" id="pz_img5" style="padding: 0px;position:absolute;opacity:0;" multiple/>
							<img id="preview5" data-src="" src="statics/img/ccx_img/xhk_03.png" data-holder-rendered="true" class="ii img-responsive p5">
							<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="del05" onclick="del5()" />
						</div>
						<!--其它-->
						<div class="pic col-xs-6">
							<input type="file" accept="image/*" capture="camera" name="qita" class="form-control pic col-xs-12 in" id="pz_img6" style="padding: 0px;position:absolute;opacity:0;" multiple/>
							<img id="preview6" data-src="" src="statics/img/ccx_img/qt_03.png" data-holder-rendered="true" class="ii img-responsive">
							<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="del06" onclick="del6()" />
						</div>
						<div>
							<br><br><br><br><br><br><br><br>
							<br><br><br><br><br><br><br><br>
							<h4 class="h6" style="color: dimgrey;">照片仅用于理赔，<span onclick="SetRemainTimes()">提交</span>我司一定会保护您的个人信息，请放心使用</h4>
						</div>
					</div>
				</div>

				<br /><br />
				<div class="col-xs-12 aad">
					<input class="afhsy h4" type="submit" value="下一步"/>
				</div>
		</div>
		<br><br>

		</form>
	</body>
	<script type="text/javascript" src="statics/js/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="statics/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="statics/js/ccx_photo2.js"></script>
	<script type="text/javascript">
		function del1() {
			$("#del01").click(function() {
				$(this).hide();
				$(this).prev().attr("src", "statics/img/ccx_img/jsz_03.png");
			});
		}

		function del2() {
			$("#del02").click(function() {
				$(this).hide();
				$(this).prev().attr("src", "statics/img/ccx_img/xsz_03.png");
			});
		}

		function del3() {
			$("#del03").click(function() {
				$(this).hide();
				$(this).prev().attr("src", "statics/img/ccx_img/sfz01_03.png");
			});
		}

		function del4() {
			$("#del04").click(function() {
				$(this).hide();
				$(this).prev().attr("src", "statics/img/ccx_img/sfz02_03.png");
			});
		}

		function del5() {
			$("#del05").click(function() {
				$(this).hide();
				$(this).prev().attr("src", "statics/img/ccx_img/xhk_03.png");
			});
		}

		function del6() {
			$("#del06").click(function() {
				$(this).hide();
				$(this).prev().attr("src", "statics/img/ccx_img/qt_03.png");
			});
		}

		function SetRemainTimes() {
			var fd = new FormData();

			var preview3 = $("#preview3").attr("src");
			if(preview3 == "statics/img/ccx_img/sfz01_03.png") {
				alert(preview3);
			} else {
				var shenfenzheng1 = $("#pz_img3").val();
				var files = document.getElementById("pz_img3").files[0];
				fd.append("action", preview3);
				fd.append("pz_img3", files);

				 
				$.ajax({                   
					url:   "idcard_api",
					                   data: {
						preview3: shenfenzheng1
					},
					                   type: "post",
					                   dataType:   "json",
					                   cache:  false, //上传文件无需缓存
					                   processData:  false, //用于对data参数进行序列化处理 这里必须false
					                   contentType:  false,
					  //必须
					                   success:   function (result) {                       
						alert("上传完成!");                   
					}               
				});

			}
		}
		
		
		$("#form2").submit(function(){
			var a = 0; 
			var b = 0;
			var c = 0; 
			var d = 0; 
			var e = 0;
			if($(".p1").attr("src")!="statics/img/ccx_img/jsz_03.png"){	
					a=1;
				}
			if($(".p2").attr("src")!="statics/img/ccx_img/xsz_03.png"){
					b=1
				}
			if($(".p3").attr("src")!="statics/img/ccx_img/sfz01_03.png"){
					c=1
				}
			if($(".p4").attr("src")!="statics/img/ccx_img/sfz02_03.png"){
					d=1
				}
			if($(".p5").attr("src")!="statics/img/ccx_img/xhk_03.png"){
					e=1
				}

			if(a==0){alert("请上传您的驾驶证照片！");
				 return false;
			}else if(b==0){
				alert("请上传您的行驶证照片！");
				 return false;
			}else if(c==0){
				alert("请上传您的身份证正面照片！");
				 return false;
			}
			else if(d==0){
				alert("请上传您的身份证反面照片！！");
				 return false;
			}else if(e==0){
				alert("请上传您的银行卡照片！！");
				 return false;
			}
		});
		
		
	</script>

</html>